<template>
	<view>
		
		<view class="columnList">
			<view v-for="item in columnList" :key="item.id" @click="toList(item.id)"
			class="bg-white flex align-center margin-bottom-sm radius2" style="padding: 16px;">
				<view class="flex-sub flex flex-direction justify-between" style="height: 70px;">
					<text class="text-xl">{{item.name}}</text>
					<text class="text-grey">{{item.remark}}</text>
					<text class="text-grey"><text class="cuIcon-attention margin-right-xs"></text> {{item.viewCount||0}}</text>
				</view>
				<view>
					<image :src="item.cover.url" style="width: 70px;height: 70px;border-radius: 2px;" /></image>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import columnApi from "@/api/columnApi.js"
	
	export default{
		data(){
			return{
				columnList: []
			}
		},
		onLoad() {
			columnApi.list().then(res => {
				this.columnList = res.data
			})
		},
		methods: {
			toList(id){
				// 增加栏目浏览量
				columnApi.addViewCount({id})
				// 跳转到栏目列表
				uni.navigateTo({
					url:'/pages/column/list?id='+id
				})
			}
		}
	}
	
	
</script>

<style lang="scss">
	
	page{
		padding: 12px;
	}
	
</style>